<template>
  <div id="khfw-create">
    <div style="padding-top: 10px"></div>
    <el-row type="flex" justify="center">
      <el-col :span="8">
        <el-form
          label-position="right"
          label-width="110px"
          ref="formLabelAlign"
          :model="formLabelAlign"
          ><!-- :inline="true":自动多行处理 -->
          <el-form-item
            label="客户"
            prop="customerId"
            :rules="[{ required: true, message: '请选择客户!' }]"
          >
            <el-select
              style="width: 100%"
              v-model="formLabelAlign.customerId"
              placeholder="请选择客户"
            >
              <el-option
                v-for="item in customerOptions"
                :key="item.customerId"
                :label="item.customerName"
                :value="item.customerId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="服务类型"
            prop="type"
            :rules="[{ required: true, message: '请选择服务类型!' }]"
          >
            <el-select
              style="width: 100%"
              v-model="formLabelAlign.type"
              placeholder="请选择服务类型"
            >
              <!-- 咨询、投诉、建议 -->
              <el-option
                v-for="item in [
                  { key: '咨询' },
                  { key: '投诉' },
                  { key: '建议' },
                ]"
                :key="item.key"
                :label="item.key"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="详细要求"
            prop="requirement"
            :rules="[{ required: true, message: '请选择服务类型!' }]"
          >
            <el-input
              placeholder="请输入详细要求"
              v-model="formLabelAlign.requirement"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="概要"
            prop="outline"
            :rules="[{ required: true, message: '请选择服务类型!' }]"
          >
            <el-input
              type="textarea"
              placeholder="请输入概要"
              v-model="formLabelAlign.outline"
            ></el-input>
          </el-form-item>

          <div style="padding-top: 10px"></div>
          <!-- <el-form-item>
            <el-button
              type="primary"
              :round="true"
              @click="submitForm('formLabelAlign')"
              style="width: 20vw"
              >立即创建</el-button
            >
          </el-form-item> -->
        </el-form>
        <el-button
          type="primary"
          :round="true"
          @click="submitForm('formLabelAlign')"
          style="width: 20vw"
          >立即创建</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      customerOptions: null,
      formLabelAlign: {
        customerId: null,
        type: "", //服务类型
        requirement: "", //详细要求
        outline: "", //概要
      },
    };
  },
  created: function () {
    this.$axios({
      method: "post",
      crossdomain: true,
      url: "/customer/list",
    }).then((response) => {
      // console.log(response.data.data[0]); //请求成功返回的数据
      this.customerOptions = response.data.data[0];
    });
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        // console.log(this.formLabelAlign);
        if (valid) {
          this.$axios({
            method: "post",
            crossdomain: true,
            url: "/services/add",
            data: this.$qs.stringify(this.formLabelAlign),
          }).then((response) => {
            // console.log(response); //请求成功返回的数据
            if (response.data.type == "OK") {
              this.$notify({
                title: "添加成功啦",
                type: "success",
                duration: "1000", // 1000ms后关闭
                showClose: false,
              });
              //   this.$router.replace({ path: "/" });
              this.formLabelAlign = {
                customerId: null,
                type: "", //服务类型
                requirement: "", //详细要求
                outline: "", //概要
              };
            }
          });
        } else {
          this.$notify({
            title: "错了哦",
            message: "还有选项没有填对呢",
            type: "error",
            duration: "4000", // 1000ms后关闭
            showClose: false,
          });
          return false;
        }
      });
    },
  },
};
</script>
